<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "childComment",
    props: {
        list: {
            type: Array,
            default: () => []
        },
        parentName: {
            type: String,
            default: ''
        },
        productId: {
            type: String,
            default: ''
        },
        currentUserId: {
            type: String,
            default: ''
        }
    },
    methods: {
        replyComment(comment) {
            let data = {
                parentId: comment.id,
                rootParentId: comment.rootParentId,
                commentProductId: comment.productId
            }
            this.$emit('data', data);
            console.log('子组件向父组件传值', data)
        },
        deleteComment(comment) {
            // 直接删除这个评论就行，实体类
        },

        handleMessageFromChild(data) {
            console.log('父组件接收到数据：' + data)
            console.log(data);
            /*    this.parentId = data.parentId
                this.rootParentId = data.rootParentId
                let data = {
                    parentId: comment.id,
                    rootParentId: comment.rootParentId
                }*/
            this.$emit('data', data);
            console.log('子组件向父组件传值', data)
        },
    }
})
</script>

<template>

    <div>
        <div v-for="(comment, index) in list" :key="index">
            <el-row>
                <el-col :span="2">
                    <!--  用户头像  -->
                    <div class="block" style="margin-left: 10px">
                        <el-avatar :size="40" :src="comment.user.avatar"></el-avatar>
                    </div>
                </el-col>
                <el-col :span="22">
                    <el-row>
                        <!--  子评论用户昵称  -->
                        <el-col :span="2">
                            <span style="color: #a19e93"> {{ comment.user.name }}</span>
                        </el-col>

                        <!--  回复  -->
                        <el-col :span="2">
                            <span style="color: #a19e93">回复</span>
                        </el-col>

                        <!--  根评论用户昵称  -->
                        <el-col :span="2">
                            <span style="color: #a19e93">{{ parentName }}</span>
                        </el-col>
                        <!--  评论时间  -->
                        <el-col :span="16">
                            <span style="color: #99a9bf">{{ comment.createTime }}</span>
                        </el-col>
                        <!--  操作  -->
                        <el-col :span="1">
                            <el-link v-if="parseInt(currentUserId) === comment.userId"
                                     @click="deleteComment(comment)">删除
                            </el-link>
                            <el-link v-if="parseInt(currentUserId) !== comment.userId"
                                     @click="replyComment(comment)">回复
                            </el-link>
                        </el-col>

                    </el-row>

                    <el-row style="margin: 5px 0">
                        <!--  回复内容  -->
                        <span style="font-size: 15px">{{ comment.content }}</span>
                    </el-row>
                </el-col>
            </el-row>
            <!--   递归的核心     -->
            <childComment v-if="comment.child?.length"
                          :list="comment.child"
                          :parentName="comment.user.name"
                          :currentUserId="currentUserId"
                          :productId="productId"
                          @data="handleMessageFromChild"/>

        </div>
    </div>


</template>

<style scoped>

</style>